<div id="app">
  {{ title }}
  <x-heading :level="3" :items="items">用户很懒，什么也没有留下</x-heading>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const { createApp, h } = Vue
  createApp({
    data() {
      return {
        title: '渲染函数',
        items: ['a', 'b', 'c']
      }
    },
  })
  .component('x-heading', {
    props: {
      level: {
        type: Number,
        required: true
      },
      items: {
        type: Array,
        default: []
      },
      modelValue: String
    },
    render() {
      // 和vue2比较，不再接收一个h函数
      // vue3中插槽和作用域插槽集中到$slots中，且每个值都是函数

      // 条件和循环
      // v-model => modelValue onUpdated:moelValue
      return h(KInput, {
        onClick: $event => console.log('clicked', $event.target),
        modelValue: this.modelValue,
        'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
      })
      
      // if (this.items.length) {
      //   const chidren = this.items.map(item => h('li', item))
      //   return h('ul', chidren)
      // } else {
      //   // 参数1-标签名称
      //   // 参数2-若干属性和事件等
      //   // 参数3-子元素-数组，如果是字符串-text
      //   return h(
      //     'h' + this.level, 
      //     {},
      //     this.$slots.default()
      //   )
      // }
    }
  })
  .mount('#app')
</script>